<template>
    <h1>V-model双向数据绑定</h1>
    <div>
        <span>姓名：</span> {{ username }}
        <input type="text" v-model="username">
        <span>密码：</span> {{ pwd }}
        <input type="password" v-model="pwd">
        <span>年龄：</span> {{ age }}
        <input type="text" v-model.number="age">
    </div>
    <div>
        <span>来自于: </span> {{ froms }}
        <!-- 下拉菜单要绑定在select上 -->
        <select v-model="froms">
            <option value="北京市">北京</option>
            <option value="南京市">南京</option>
            <option value="天津市">天津</option>
        </select>
    </div>
    <div>
        <!-- (重要)
      遇到复选框, v-model的变量值
      非数组 - 关联的是复选框的checked属性
      数组   - 关联的是复选框的value属性
       -->
        <span>爱好: </span> {{ hobby }}
        <input type="checkbox" v-model="hobby" value="逛街">逛街
        <input type="checkbox" v-model="hobby" value="学习">学习
        <input type="checkbox" v-model="hobby" value="写代码">写代码
    </div>
    <div>
        <span>自我介绍</span> {{ intro }}
        <textarea v-model="intro"></textarea><br>
        <span>个人名言：</span>
        <input type="text" v-model.trim="str">
    </div>
</template>

<script setup>
import { ref } from 'vue'
const username = ref("张三")
const pwd = ref("123456")
const froms = ref("南京市")
const hobby = ref([])
const age = ref(12);
const intro = ref("我是一名java开发工程师，热爱编程和解决问题。")
    // v-model
    //* .number   以parseFloat转成数字类型
    //* .trim          去除首尾空白字符
//.lazy           在change时触发而非inupt时
    const str = ref("")

</script>

<style scoped>

</style>